<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script src="运动框架.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 100%;
				height: 100%;
			}
			div{
				margin: 0px auto;
				width:400px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}
			.oul{
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: auto;
				list-style: none;
				position: absolute;
				top:0px;
				
				
			}
			.oul>li{
				width: 400px;
				height: 200px;
			}
			.oul-two{
				position: relative;
				width: 400px;
				margin: 0px auto;
				list-style: none;
				top: -30px;
				
			}
			.oul-two>li{
				display: inline-block;
				width: 25px;
				height: 25px;
				border-radius:25px ;
				background-color: red;
				text-align: center;
			}
			.colors{
				transform: translateY(360deg);
				color: white;
			}
		</style>
		<script type="text/javascript">
			
			var speed;
			var item;
			var num=0;
			var oli_lenght;
			var two;
			var	oul;
			var itemr;
				
			
					
//					console.log('1');
					
					
				
					
//					if($('#oul>li').offsetTop>0){	
//						console.log($('#oul>li').offsetTop);
//						
//					}
//					if($('#oul').offset().top>-isif){
//						oul.style.top=0+'px';
//					}
	
			
		
			
			window.onload=function(){
				oul =document.getElementById('oul');
				oli_lenght =$('#oul>li').length;
				two = document.getElementById('two').getElementsByTagName('li');   //获取ul下面的li 
				console.log(two);
				var isif =oli_lenght*speed;
				var index = 0;
				
				var height =$('#oul>li').height();
				speed =height;
				function tab(){
							for(var i = 0;i<oli_lenght;i++){
								two[i].className='';
							}
							two[num].className='colors';
							move(oul,{top:-speed*num});
				}
					function next(){
						num++;
						if(num>=oli_lenght){
							num=0;
							
					}
						tab();
				}
				for(var i = 0;i<oli_lenght;i++){
					console.log(i);
					two[i].index=i;   //给每个li都赋值下标
					two[i].onclick=function(){
						num=this.index;
						tab();
					}
				}
				itemr =setInterval(next,2000);
			}
		</script>
	</head>
	<body>
		<div class="">
			<ul class="oul" id="oul">
				<li><img src="Bootstrap 3.3.5（环境）2.19-3.20/img/ed026566424880372286e5d5bafbf28c.jpg"/></li>
				<li><img src="js-demo/JS运动中级/记录/幻灯片——上下滑动/images/3.jpg"/></li>
				<li><img src="js-demo/JS运动中级/记录/幻灯片——上下滑动/images/4.jpg"/></li>
			</ul>
		</div>
		<ul class="oul-two" id="two">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		
		</ul>
	</body>
</html>
